
<template>
  <div>
    <MyTable
      v-model="params"
      v-loading="loading"
      :total="total"
      :list="list"
      :arr="arr"
      :title="title"
      @search="searchFn"
      @input="jumpFn"
      @mondify="mondifyFn"
      @add="addFn"
      @stop="stopFn"
      @del="delFn"
    />
  </div>
</template>
<script>
import { getListByPage, mondifyWareHouse, delWareHouse } from '@/api'
export default {
  data() {
    return {
      loading: false,
      total: 0,
      title: ['仓库编码', '仓库名称', '仓库状态'],
      params: {
        size: 10,
        code: '',
        name: '',
        status: '',
        current: 1
      },
      list: [],
      arr: ['仓库编码', '仓库名称', '仓库类型', '省/市/区', '详细地址', '仓库状态', '仓库面积m²', '库区数量', '负责人', '联系电话', '更新时间'],
      type: {
        ZZ: '中转仓',
        JG: '加工仓',
        CB: '储备仓',
        LC: '冷藏仓'
      },
      status: {
        0: '停用',
        1: '启用'
      }
    }
  },
  async created() {
    this.fetchWareHouseList()
  },
  methods: {
    async fetchWareHouseList() {
      this.loading = true
      const res = await getListByPage(this.params)
      // console.log(res)
      this.list = res.data.records.map(item => {
        item.type = this.type[item.type]
        item.status = this.status[item.status]
        return item
      })
      this.params.current = +res.data.current
      this.total = +res.data.total
      this.loading = false
    },
    async searchFn(val) {
      this.params = {
        code: val.one,
        name: val.two,
        status: val.three
      }
      this.fetchWareHouseList()
    },
    jumpFn() {
      // console.log(val)
      this.fetchWareHouseList()
    },
    addFn() {
      this.$router.push({ name: 'addHouse' })
    },
    async mondifyFn(val) {
      this.$router.push({
        path: 'addHouse',
        query: {
          id: val.id
        }
      })
    },
    stopFn(val) {
      const title = val.status
      const status = val.status === '启用' ? '0' : '1'
      this.$confirm(`确定要${title}:${val.name}吗？`, `确认${title}`, {
        cancelButtonText: '取消',
        confirmButtonText: '确认'
      }).then(async() => {
        await mondifyWareHouse({ id: val.id,
          status
        })
        this.$message.success('状态改变成功')
        // 重新渲染页面
        this.fetchWareHouseList()
      }).catch()
    },
    delFn(val) {
      this.$confirm('确认要删除吗？', '温馨提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(async() => {
        await delWareHouse(val.id)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
